import React from 'react'
import {ListWrapper, Listitem,LikeWrapper, LoadMore} from '../style'
import { connect } from 'react-redux';
import {actionCreators} from '../store'
import { Link } from 'react-router-dom'
 class List extends React.PureComponent{
    render(){
        return(
            <div>
            <ListWrapper>
                {this.props.ArticleList.map((item,index)=>{
                    return(
                <Link key={index} to='/detail'>       
                    <Listitem>
                        <img className='ImgClass' src={item.get('imgUrl')}alt=''></img>
                        <h1 className='H1Class' >{item.get('tielel')}</h1>
                        <p className='PClass' >{item.get('content')}</p>
                        <LikeWrapper >
                            <li className='LiItem'>{item.get('listLi1')}</li>
                            <li className='LiItem'>{item.get('listLi2')}</li>
                            <li className='LiItem'>{item.get('listLi3')}</li>
                            <li className='LiItem'>{item.get('listLi4')}</li>
                        </LikeWrapper>
                    </Listitem>
                </Link>      
                    )
                }) }
            </ListWrapper>
                  <LoadMore  onClick={()=>this.props.getMoreList(this.props.page)}>阅读更多</LoadMore>
        </div>
        )

    }
}
const mapState=(state)=>({
    ArticleList:state.getIn(['home','articleList']),
    page:state.getIn(['home','articPage'])
})
const mapdispatch=(dispatch)=>({
    getMoreList(page){
        dispatch(actionCreators.getMoreList(page))
    }
})

export default connect(mapState,mapdispatch)(List)